<template>
  <div class="terminal-wrap" v-show="visible">
    <div class="terminal-dialog">
      <div class="terminal-dialog__header">
        <div class="terminal-dialog__title">
          <span>黑屏</span>
        </div>
        <button type="button" aria-label="Close" class="terminal-dialog__headerbtn" @click="onClose">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <div class="terminal-dialog__content">
        <div class="terminal-dialog__container" ref="scroll">
          <template v-for="(item, idx) in list">
            <pre v-if="item.type==='user'" :key="idx" class="terminal-user">{{item.content}}</pre>
            <template v-else>
              <pre :key="'pre' + idx">{{item.content}}</pre>
              <br :key="'br' + idx"/>
            </template>
          </template>
          <i class="el-icon-loading" style="font-weight: bold" v-if="loading"></i>
          <pre> </pre>
          <pre> </pre>
          <pre> </pre>
        </div>
        <div class="terminal-dialog__input-box">
          <el-input type="textarea" v-focus placeholder="输入指令" :autosize="{ minRows: 1, maxRows: 6}" size="mini" v-model="form.cmd"/>
          <div class="terminal-btn-group">
            <el-select v-model="form.officeNo" class="w120" size="mini" placeholder="选择组" filterable>
              <el-option v-for="item in options.etermGroup" :key="item" :label="item" :value="item"/>
            </el-select>
            <el-button :loading="loading" type="primary" size="mini" class="w80" @click="onExecute" title="Ctrl+Enter">执行</el-button>
            <el-button :loading="loading" type="warning" size="mini" class="w80" @click="onClear">清空</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Keyboard from '@/constants/Keyboard'
import {addCtrlKeyEvent, removeCtrlKeyEvent} from '@/utils/events/keyboardListener'

export default {
  name: 'OrderTerminal',
  props: {
    visible: Boolean
  },
  data () {
    return {
      options: {
        etermGroup: []
      },
      loading: false,
      list: [],
      form: {
        cmd: '',
        officeNo: 'CSX510'
      }
    }
  },
  watch: {
    visible () {
      this.form.cmd = ''
    },
    list () {
      this.$nextTick(() => {
        const scroll = this.$refs['scroll']
        scroll.scrollTop = scroll.scrollHeight
      })
    }
  },
  created () {
    addCtrlKeyEvent(Keyboard.Enter, this.onExecute)
    this.loadOptions()
  },
  beforeDestroy () {
    removeCtrlKeyEvent(Keyboard.Enter, this.onExecute)
  },
  methods: {
    loadOptions () {
      this.$service.eterm.queryAllGroupList().then(res => {
        this.options.etermGroup = res.data
      })
    },
    onClose () {
      this.$emit('update:visible', false)
    },
    onExecute () {
      if (!this.loading && this.form.cmd) {
        this.loading = true
        this.list.push({
          type: 'user',
          content: this.form.cmd
        })

        this.$service.eterm.executeCmd(this.form).then(res => {
          this.list.push({
            type: 'sys',
            content: res.data
          })
        }).catch(res => {
          this.list.push({
            type: 'sys',
            content: res.msg
          })
        }).finally(() => {
          this.loading = false
        })
        this.form.cmd = ''
      }
    },
    onClear () {
      if (!this.loading) {
        this.list = []
      }
    }
  }
}
</script>

<style scoped>
.terminal-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  overflow: auto;
}

.terminal-dialog {
  position: relative;
  border: 1px solid #ebeef5;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  width: 1000px;
  margin: 50px auto 0;
}

.terminal-dialog__header {
  position: relative;
  padding: 15px 15px 10px;
}

.terminal-dialog__title {
  padding-left: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1;
  color: #303133;
}

.terminal-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  cursor: pointer;
}

.terminal-dialog__content {
  position: relative;
  padding: 10px 15px;
  color: #606266;
  font-size: 14px;
}

.terminal-dialog__container {
  background-color: #111111;
  color: #5daf34;
  height: 400px;
  overflow: auto;
}

.terminal-user {
  position: relative;
  margin-left: 30px;
}

.terminal-user:before {
  position: absolute;
  content: " >: ";
  left: -30px;
}

.terminal-dialog__input-box {
  margin-top: 10px;
  position: relative;
  padding-right: 300px;
}

.terminal-dialog__input-box .terminal-btn-group {
  position: absolute;
  width: 300px;
  right: 0;
  top: 0;
  text-align: right;
}

</style>
